'use client'

import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Languages } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import Cookies from 'js-cookie'
import i18n from '@/lib/i18n/index'

const languages = [
  { code: 'zh', label: '中文' },
  { code: 'en', label: 'English' },
]

export function LanguageSwitcher() {
  const { t } = useTranslation()

  const switchLanguage = (locale: string) => {
    // 设置 cookie
    Cookies.set('NEXT_LOCALE', locale)
    // 切换语言
    i18n.changeLanguage(locale)
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Languages className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {languages.map((lang) => (
          <DropdownMenuItem
            key={lang.code}
            onClick={() => switchLanguage(lang.code)}
            className={i18n.language === lang.code ? 'bg-accent' : ''}
          >
            {lang.label}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}